<template>
  <div>
    <!-- 
      v-show/v-if 控制标签的显示隐藏
      区别：
      v-show：通过css样式display:none来控制隐藏的
      v-if: 直接将标签从DOM中删除的方法来隐藏标签

      v-show性能比v-if更高，为什么呢？
      因为删除操作比控制样式的消耗性能大
     -->
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <!-- v-if的高级使用
    可以结合v-else一起使用

    注意：这两个指令必须使用在相邻的两个兄弟元素之间
     -->
    <div>
      <p v-if="age>18">成年了</p>
      <!-- <div></div> -->
      <p v-else>未成年--多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isOk: true,
      age: 20
    }
  }
}
</script>

<style>

</style>